<template>
  <div class="home">
    <el-row class="tac">
  <el-col :span="12">
    <el-menu
      class="el-menu-vertical-demo"
      @open="handleOpen"
      @close="handleClose"
      background-color="#545c64"
      text-color="#fff"
      active-text-color="#ffd04b"
      router="true"
      >
      <el-menu-item index="/index">
        <i class="el-icon-menu"></i>
        <span slot="title">首页</span>
      </el-menu-item>
      <el-submenu index="2">
        <template slot="title">
          <i class="el-icon-document"></i>
          <span>数据管理</span>
        </template>
        <el-menu-item-group>
          <!-- <template slot="title">分组一</template> -->
          <el-menu-item index="1-1">用户列表</el-menu-item>
          <el-menu-item index="/shop">商家列表</el-menu-item>
        </el-menu-item-group>
      </el-submenu>
           <el-submenu index="3">
        <template slot="title">
          <i class="el-icon-plus"></i>
          <span>添加数据</span>
        </template>
        <el-menu-item-group>
          <!-- <template slot="title">分组一</template> -->
          <el-menu-item index="1-1">用户列表</el-menu-item>
          <el-menu-item index="1-2">商家列表</el-menu-item>
        </el-menu-item-group>
      </el-submenu>
           <el-submenu index="4">
        <template slot="title">
          <i class="el-icon-star-off"></i>
          <span>图表</span>
        </template>
        <el-menu-item-group>
          <!-- <template slot="title">分组一</template> -->
          <el-menu-item index="1-1">用户列表</el-menu-item>
          <el-menu-item index="1-2">商家列表</el-menu-item>
        </el-menu-item-group>
      </el-submenu>
           <el-submenu index="5">
        <template slot="title">
          <i class="el-icon-edit"></i>
          <span>编辑</span>
        </template>
        <el-menu-item-group class="home_nav">
          <!-- <template slot="title">分组一</template> -->
          <el-menu-item index="1-1">用户列表</el-menu-item>
          <el-menu-item index="1-2">商家列表</el-menu-item>
        </el-menu-item-group>
      </el-submenu>
           <el-submenu index="6">
        <template slot="title">
          <i class="el-icon-setting"></i>
          <span>设置</span>
        </template>
        <el-menu-item-group>
          <!-- <template slot="title">分组一</template> -->
          <el-menu-item index="1-1">用户列表</el-menu-item>
        </el-menu-item-group>
      </el-submenu>
           <el-submenu index="7">
        <template slot="title">
          <i class="el-icon-warning-outline"></i>
          <span>说明</span>
        </template>
        <el-menu-item-group>
          <!-- <template slot="title">分组一</template> -->
          <el-menu-item index="1-1">用户列表</el-menu-item>
        </el-menu-item-group>
      </el-submenu>
    </el-menu>
  </el-col>
</el-row>
<!-- 右边头部 -->
  <div class="home_right_top">
    <router-view></router-view>
  </div>
  </div>
</template>

<script>
  export default {
    name:'HelloWorld',
    methods: {
      handleOpen(key, keyPath) {
        console.log(key, keyPath);
      },
      handleClose(key, keyPath) {
        console.log(key, keyPath);
      }
    }
  }
</script>
<style  scoped>
.home_right_top{
  width: 100%;
  height: 100%;
  overflow: auto;
}
.home{
  width: 100%;
  height: 100%;
  display: flex;
}
.tac{
  width: 300px;
  height: 100%;
  }
.el-col-12{
  width: 100%;
  height: 100%;
}
.el-menu{
  height: 100%;
}
</style>